<template>
	<view class="">
		<swiper class="swiper swip-img" :circular="true" :indicator-dots='true' :autoplay="true" :interval="3000" :duration="500">
			<swiper-item>
				<image src="../../static/images/hehadj.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/images/bannergy.jpg" mode="" ></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/images/hohlejd.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="">
			<wuc-tab :tab-list="tabThree" :tabCur.sync="TabCur" @change="tabChange" selectClass="seleCtion" :textFlex="true"></wuc-tab>
			
			<!-- 热门推荐 -->
			<view class="stic-Harbour">
				<view class="mui-table-view-celi"  v-for="(time,index) in region" :key="index">
					<view class="Thailand-dv">
						<view class="Thailand" @click="Jumplist">
							<image :src="time.imgone"/></image>
							<view>{{time.nameone}}</view>
							<text>{{time.thingone}}</text>
						</view>
						<view class="Thailand" @click="Jumplist" >
							<image :src="time.imgtwo"/></image>
							<view>{{time.nametwo}}</view>
							<text>{{time.thingtwo}}</text>
						</view>
						<view class="Thailand"  @click="Jumplist">
							<image :src="time.imgthree"/></image>
							<view>{{time.namethree}}</view>
							<text>{{time.thingthree}}</text>
						</view>
					</view>
					<view class="Thailand-dv">
						<view class="Turkey" @click="Jumplist">{{time.btnone}}</view>
						<view class="Turkey" @click="Jumplist">{{time.btntwo}}</view>
						<view class="Turkey" @click="Jumplist">{{time.btnthree}}</view>
					</view>
					<view class="Thailand-dv">
						<view class="Turkey" @click="Jumplist">{{time.iptone}}</view>
						<view class="Turkey" @click="Jumplist">{{time.ipttwo}}</view>
						<view class="Turkey" @click="Jumplist">{{time.iptthree}}</view>
					</view>
				</view>
				<view class="oneNoorder" v-if="region.length == 0">
					<image src="../../static/images/noorder.png" mode=""></image>
					<view>没有相关地区</view>
				</view>
			</view>
			<!-- 没有地区 -->
			
		</view>
		
		<!-- 列表 -->
		<view>
			<view class="gy-titele">
				<view>贵阳</view>
				<view class="gy-circular"></view>
				<view>热门</view>
			</view>
			<view class="line-ul">
				<view class="line-list" @click="listname" v-for="(set,index) in meal" :key="index">
					<image :src="set.img" class="jiaxl-img"/></image>
					<view class="Price-bt">
						<text class="telelbt">{{set.tetle}}</text>
						<view class="Trip-jt">
							<view class="Praise-lv">{{set.out}}</view>
							<view class="Trip-dd">销量：{{set.volume}}</view>
						</view>
						<view class="Trip-jt">
							<view class="Praise-stly">{{set.days}}</view>
							<view class="Trip-dd">好评率{{set.praise}}</view>
						</view>
						<view class="Price-jg">
							<text class="Price-jg-span">￥</text>
							<view>{{set.money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	export default{
		components: { WucTab },
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url: '../index/search' 
			});
		},
		data(){ 
			return {
				TabCur: 0,
				tabThree:[
					{name: '热门推荐'},
					{name: '国内推荐'},
					{name: '出境推荐'},
					{name: '贵州省内'},
					{name: '贵阳市内'},
				],
				meal:[
					{
						tetle:'九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游',
						img:'../../static/images/jiaxl.jpg',
						out:'贵阳出发',
						volume:'999+',
						days:'三天两夜',
						praise:'90%',
						money:'1880.00'
					},
					{
						tetle:'九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游',
						img:'../../static/images/hehadj.jpg',
						out:'贵阳出发',
						volume:'999+',
						days:'三天两夜',
						praise:'90%',
						money:'1880.00'
					}
				],
				region:[],
				regionlist:[
					[{
						index:0,
						nameone:'泰国',
						thingone:'1034个好货',
						imgone:'../../static/images/bannergy.jpg',
						nametwo:'贵阳',
						thingtwo:'1138个好货',
						imgtwo:'../../static/images/hohlejd.jpg',
						namethree:'北京',
						thingthree:'1266个好货',
						imgthree:'../../static/images/hehadj.jpg',
						btnone:'四川',
						btntwo:'意大利',
						btnthree:'日本',
						iptone:'越南',
						ipttwo:'土耳其',
						iptthree:'巴厘岛'
					}],
					[{
						index:1,
						nameone:'北京',
						thingone:'1034个好货',
						imgone:'../../static/images/bannergy.jpg',
						nametwo:'上海',
						thingtwo:'1138个好货',
						imgtwo:'../../static/images/hohlejd.jpg',
						namethree:'广州',
						thingthree:'1266个好货',
						imgthree:'../../static/images/hehadj.jpg',
						btnone:'长沙',
						btntwo:'武汉',
						btnthree:'天津',
						iptone:'杭州',
						ipttwo:'苏州',
						iptthree:'广州'
					}],
					[{
						index:2,
						nameone:'巴黎',
						thingone:'1034个好货',
						imgone:'../../static/images/bannergy.jpg',
						nametwo:'伦敦',
						thingtwo:'1138个好货',
						imgtwo:'../../static/images/hohlejd.jpg',
						namethree:'莫斯科',
						thingthree:'1266个好货',
						imgthree:'../../static/images/hehadj.jpg',
						btnone:'新西兰',
						btntwo:'澳大利亚',
						btnthree:'希腊',
						iptone:'纽约',
						ipttwo:'柏林',
						iptthree:'东京'
					}],
					[
						
					],
					[
						
					]
				]
			}
		},
		onLoad(){
			this.region = this.regionlist[0];
		},
		 methods: {
			tabChange(index) {
				this.TabCur = index;
				this.region = this.regionlist[index];
				console.log(this.region)
			},
			Jumplist:function(){
				uni.navigateTo({
					url:"line-list"
				})
			},
			listname:function(){
				uni.navigateTo({
					url:'line-list'
				})
			}
		}
		
	}
</script>

<style>
	@import "../../components/line/line";
	@import "../../common/iconfont.css";
	@font-face {
	       font-family: 'iconfont';
		    src: url('~@/static/iconfont.ttf');
	}
</style>

  